import { planType, propsType, click, planPropsType } from './cascader.type';
import { ref, watch } from "vue";

export const useCascader = (props: propsType) => {
  const data = ref<Array<planType>>(props.list);
  const active = ref<number>(-1);
  const clickData = ref<Array<planType>>([]);
  const handleClick: click = (index) => {
    active.value = index;
    if (data.value[index]?.children?.length) {
      clickData.value = data.value[index].children!
    }
  }

  return {
    data,
    handleClick,
    clickData,
    active
  }
}

export const useCascaderPlan = (props: planPropsType) => {
  watch(
    () => props.list,
    () => {
      data.value = props.list;
      active.value = -1;
      clickData.value = [];
    },
    {
      deep: true
    }
  );
  const active = ref<number>(-1);
  const data = ref<Array<planType>>(props.list);
  const clickData = ref<Array<planType>>([]);
  const handleClick: click = (index) => {
    active.value = index;
    if (data.value[index]?.children?.length) {
      clickData.value = data.value[index].children!
    }
  }

  return {
    data,
    handleClick,
    clickData,
    active
  }
}